<template>
  <div class="image-base64-converter">
    <div class="converter-container">
      <h1>图片Base64转换</h1>
      
      <div class="converter-section">
        <h2>图片转Base64</h2>
        <el-upload
          class="upload-area"
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :on-change="handleImageChange"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="Base64编码将显示在这里"
          v-model="imageBase64"
          readonly
        ></el-input>
        <div class="button-group">
          <el-button type="primary" @click="copyBase64" :disabled="!imageBase64">
            <el-icon><DocumentCopy /></el-icon>
            复制Base64
          </el-button>
        </div>
      </div>

      <div class="converter-section">
        <h2>Base64转图片</h2>
        <el-input
          class="base64-input"
          type="textarea"
          :rows="5"
          placeholder="请输入Base64编码"
          v-model="inputBase64"
        ></el-input>
        <div class="button-group">
          <el-button type="primary" @click="convertBase64ToImage">
            <el-icon><Picture /></el-icon>
            转换
          </el-button>
        </div>
        <div v-if="previewImageSrc" class="preview-area">
          <img :src="previewImageSrc" alt="预览图片" class="preview-image">
          <div class="button-group">
            <el-button type="success" @click="downloadImage">
              <el-icon><Download /></el-icon>
              下载图片
            </el-button>
          </div>
        </div>
      </div>

      <div class="button-group">
        <el-button type="warning" @click="goToHomepage">
          <el-icon><Back /></el-icon>
          返回
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Plus, DocumentCopy, Picture, Download, Back } from '@element-plus/icons-vue'

const router = useRouter()
const imageBase64 = ref('')
const inputBase64 = ref('')
const previewImageSrc = ref('')

const handleImageChange = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    imageBase64.value = e.target.result
  }
  reader.readAsDataURL(file.raw)
}

const copyBase64 = () => {
  if (!imageBase64.value) {
    ElMessage.warning('没有可复制的Base64编码')
    return
  }
  navigator.clipboard.writeText(imageBase64.value)
    .then(() => ElMessage.success('Base64编码已复制到剪贴板'))
    .catch(() => ElMessage.error('复制失败，请手动复制'))
}

const convertBase64ToImage = () => {
  if (!inputBase64.value) {
    ElMessage.warning('请输入Base64编码')
    return
  }
  let base64Data = inputBase64.value.trim()
  if (!base64Data.startsWith('data:image')) {
    base64Data = 'data:image/png;base64,' + base64Data
  }
  previewImageSrc.value = base64Data
}

const downloadImage = () => {
  if (!previewImageSrc.value) {
    ElMessage.warning('没有可下载的图片')
    return
  }
  const link = document.createElement('a')
  link.href = previewImageSrc.value
  link.download = 'converted_image.png'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

const goToHomepage = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.image-base64-converter {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  overflow: auto;

  .converter-container {
    max-width: 800px;
    width: 98%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    padding: 25px;
    box-sizing: border-box;
    margin: 20px auto;

    h1 {
      text-align: center;
      color: #4a5568;
      font-size: 2.5em;
      margin: 0 0 25px 0;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }

    .converter-section {
      margin-bottom: 30px;
      background-color: #f0f5ff;
      padding: 20px;
      border-radius: 12px;

      h2 {
        color: #4a5568;
        margin: 0 0 20px 0;
        font-size: 1.2em;
      }

      .upload-area {
        margin-bottom: 20px;
        display: flex;
        justify-content: center;

        :deep(.el-upload--picture-card) {
          width: 150px;
          height: 150px;
          line-height: 150px;
        }
      }

      .preview-area {
        margin-top: 20px;
        text-align: center;

        .preview-image {
          max-width: 100%;
          max-height: 300px;
          border-radius: 8px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          margin-bottom: 20px;
        }
      }
    }

    .button-group {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 20px;

      .el-button {
        display: flex;
        align-items: center;
        justify-content: center;

        .el-icon {
          margin-right: 6px;
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .image-base64-converter {
    padding: 10px;

    .converter-container {
      padding: 15px;

      h1 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .converter-section {
        padding: 15px;

        h2 {
          font-size: 18px;
        }

        .upload-area {
          :deep(.el-upload--picture-card) {
            width: 120px;
            height: 120px;
            line-height: 120px;
          }
        }
      }

      .button-group {
        flex-direction: column;
        gap: 10px;

        .el-button {
          width: 100%;
        }
      }
    }
  }
}
</style>
